<template>
  <Promised :promise="getAuthsAsync">
    <template v-slot:pending>
      <CardSkeleton
        title="功能权限"
        :rows="8"
      />
    </template>
    <template v-slot>
      <section>
        <Card
          title="功能权限"
        >
          <a-tree
            v-model="checkedKeys"
            checkable
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :replace-fields="{
              children:'children',
              title:'name',
              key:'alias'
            }"
            :selected-keys="selectedKeys"
            :tree-data="auths.map"
            @expand="onExpand"
            @select="onSelect"
          />
        </Card>
      </section>
    </template>
  </Promised>
</template>

<script>
import { Card } from '@/components'
import props from './props'
import { getAuths } from '@/api/flow/auth'

export default {
  mixins: [props],

  data () {
    return {
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],

      getAuthsAsync: null,
      // 权限
      auths: {},
    }
  },
  components: {
    Card,
  },

  created () {
    this.getAuthsAsync = this.getAuths()
  },

  watch: {
    checkedKeys (val) {
      console.log('onCheck', val)
    },
  },

  methods: {
    // 获取权限
     getAuths () {
      return new Promise((resolve, reject) => {
        getAuths()
          .then(data => {
            this.auths = data
            resolve(data)
          })
          .catch(error => {
            reject(error)
          })
      })
    },

    onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck (checkedKeys) {
      console.log('onCheck', checkedKeys)
      this.checkedKeys = checkedKeys
    },
    onSelect (selectedKeys, info) {
      console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
